//detail页面入口文件
import '../css/detail.scss';
//导入工具
import tools from '../utils/tools';

//组件：
//引入ImgShow模块(构造函数)
import ImgShow from '../components/detail/img_show/index.js';
//引入InfoBox模块(构造函数)
import InfoBox from '../components/detail/info_box/index.js';
//引入TitleBox模块(构造函数)
import TitleBox from '../components/detail/title_box/index.js';
//引入TitleBox模块(构造函数)
import BtnBox from '../components/detail/btn_box/index.js';



//数据：
//导入数据模型的类
import {
  DetailModel
} from '../models/detail';

//实例化数据模型的类
const detailModel = new DetailModel();

//实例化引入组件模块
const imgShow = new ImgShow();
const infoBox = new InfoBox();
const titleBox = new TitleBox();
const btnBox = new BtnBox();




const App = (doc) => {
  //获取主页container容器
  const oContainer = doc.getElementsByClassName('J_container')[0];

  //传入处理请求Url地址的键名id返回匹配好的键值
  detailModel.getGoodsDetail(tools.getUrlQueryValue('id'))
    .then((res) => {
      let html = '';
      //图片
      html += imgShow.tpl().replace(/{{(.*?)}}/g, (node, key) => {
        return {
          img_url: res.img_url,
          goods_name: res.goods_name
        } [key];
      });

      //价格 成交量
      html += infoBox.tpl().replace(/{{(.*?)}}/g, (node, key) => {
        return {
          price: res.price,
          m_sales: res.m_sales
        } [key];
      })

      //标题
      html += titleBox.tpl().replace(/{{(.*?)}}/, res.goods_name);

      //底下购买按钮
      html += btnBox.tpl().replace(/{{(.*?)}}/, res.id);

      oContainer.innerHTML = html;
    })

    //这里的then()等页面加载DOM完毕后执行事件绑定处理函数
    .then(() => {
      //执行btnBox组件里的bindEvent函数
      btnBox.bindEvent();
    });
}

new App(document);